<template>
  <div :style="sideBarOperationItemWrapperStyle">
    <div :style="sideBarOperationItemFlexContainerStyle">
      <div :style="sideBarOperationItemIconWrapperStyle">
        <slot name="header" />
      </div>
      <div v-if="!!name" :style="sideBarOperationItemNameWrapperStyle">
        {{ name }}
      </div>
      <slot v-else />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { usePageLeftOperationItem } from './style-page-left-operation-item';

const props = defineProps({ name: { type: String, default: '' } });
const { name } = toRefs(props);

const {
  sideBarOperationItemWrapperStyle,
  sideBarOperationItemFlexContainerStyle,
  sideBarOperationItemIconWrapperStyle,
  sideBarOperationItemNameWrapperStyle,
} = usePageLeftOperationItem();
</script>
